<template>
  <button v-ripple="ripple" :class="buttonClass" :style="buttonStyle">
    <v-icon v-if="icon" :icon="icon" :width="iconWidth" :height="iconHeight" :color="iconColor" />
    <template v-else>
      <v-icon
        v-if="previousIcon"
        :icon="previousIcon"
        :width="previousIconWidth"
        :height="previousIconHeight"
        :color="previousIconColor"
      />
      <span v-if="content">{{ content }}</span>
      <slot v-else />
      <v-icon
        v-if="appendIcon"
        :icon="appendIcon"
        :width="appendIconWidth"
        :height="appendIconHeight"
        :color="appendIconColor"
      />
    </template>
  </button>
</template>

<script lang="ts">
import { computed, defineProps, defineComponent } from 'vue';
import VIcon from '@/components/Icon.vue';

export default defineComponent({
  components: {
    VIcon
  },
  props: {
    previousIcon: String,
      appendIcon: String,
      content: String,
      previousIconWidth: String,
      previousIconHeight: String,
      previousIconColor: String,
      appendIconWidth: String,
      appendIconHeight: String,
      appendIconColor: String,
      icon: String,
      iconWidth: String,
      iconHeight: String,
      iconColor: String,
      push: Boolean,
      styles: {
        type: Object,
        default: () => ({})
      },
      type: {
        type: String,
        default: 'default',
        validator: (v: string) => ['default', 'primary', 'blue'].indexOf(v) !== -1
      },
      block: {
        type: Boolean,
        default: false
      },
      ripple: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: 'auto'
      },
      border: {
        type: Boolean,
        default: true
      },
      hideShadow: {
        type: Boolean,
        default: false
      }
  },
  setup(props) {
    const buttonClass = computed(() => {
      const classes = ['apple-button', 'v-radius', props.hideShadow ? '' : 'v-shadow', props.type];
      return classes;
    });
    const buttonStyle = computed(() => {
      const styles: any = {};
      styles.display = props.block ? 'block' : 'inline-block';
      styles.width = props.width !== 'auto' ? props.block ? '100%' : 'auto' : props.width;
      if (Object.keys(props.styles).length > 0) {
        for (let key in props.styles) {
          if (props.styles.hasOwnProperty(key)) {
            styles[key] = props.styles[key];
          }
        }
      }
      return styles;
    })
    const focusShadow = computed(() => {
      const rgb = props.type === 'blue' ? '0 125 250' : props.type === 'primary' ? '237 108 75' : '192 192 192';
      return props.border ? `0 0 0 4px rgb(${rgb} / 60%)` : props.hideShadow ? '' : '0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)';
    });
    return {
      buttonClass,
      buttonStyle,
      focusShadow
    }
  }
})


</script>

<style scoped lang="scss">
.default {
  background-color: #f5f5f5;
  color: #000;
}
.default:hover {
  background-color: #e5e5e4;
}
.primary {
  background-color: $primary-color;
  color: #fff;
}
.primary:hover {
  background-color: rgb(237 108 75 / 80%) !important;
}
.blue {
  background-color: #0077ed;
  border: 1px solid #0077ed;
  color: #fff;
}
.blue:hover {
  background-color: rgb(0 119 237 / 80%) !important;
}
.apple-button {
  cursor: pointer;
  height: 36px;
  padding: 0 16px;
  transition: all 0.25s ease-out;
  border: none;
  outline: none;
}
.apple-button:focus {
  box-shadow: v-bind(focusShadow);
  outline: none;
}
</style>